<template>
  <transition name="fade">
    <div class="mask" v-show="showmap">
      <div class="uploadtk" v-show="showmap">
        <div class="dialog_main_con all_center">
          <div class="dialog_head pr">
            <h2>地图定位</h2>
            <a href="javascript:void(0)" class="dialog_link close" @click="closeSelf">&times;</a>
          </div>
          <div class="contms">
            <div id="r-result" class="r-results">请输入地址:<input type="text" id="suggestId"/></div>
            <div id="allmap" class="allmaps" data-flag="0"></div>
          </div>
          <div id="searchResultPanel" class="none"></div>
          <div class="modal-footer">
            <a class="btn btn-primary submit" @click="addMap()">确定</a>
            <a class="btn btn-primary cancel" @click="closeSelf">取消</a>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  var maps = null;
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: "uploadtk",
    props: ['showmap','option'],
    mounted() {
      this.loadBaiDuMap();
    },
    data() {
      return {
        show: false,
        map: null,
        city: '北京',
        obj: {
          address: null,
          lat: null,
          lng: null
        }
      }
    },
    watch: {
      city: function () {
        this.map.setCurrentCity(this.city);
      }
    },
    methods: {
      ...mapActions({
        insertMap: "insertMap"
      }),
      addMap(){

        var params = {};
        params.type = 5;
        params.obj = this.obj;
        params.option=this.option;
        this.$store.dispatch('addComponent', params);

//        var ttt=this.obj;
//        this.insertMap(this.obj);
        this.closeSelf();
      },
      loadBaiDuMap() {
        var self = this;
        $(document).ready(function () {
          if ($("#allmap").data('flag') == 0) {
            $("#allmap").data('flag', 1);
            self.map = new BMap.Map("allmap");
            self.map.centerAndZoom("北京", 11); // 初始化地图,设置城市和地图级别。
            var ac = new BMap.Autocomplete( //建立一个自动完成的对象
              {
                "input": "suggestId",
                "location": this.map
              });
            ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件

              var str = "";
              var _value = e.fromitem.value;
              var value = "";
              if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
              }
              str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

              value = "";
              if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
              }
              str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
              document.getElementById("searchResultPanel").innerHTML = str;

              //					console.log(str)
            });
            var myValue;
            ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
              var _value = e.item.value;
              myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
              document.getElementById("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br>myValue = " + myValue;
              //					 setPlace(map);
              // alert('ss')

//					self.city=myValue;
              self.setPlace(myValue, self.obj);
            });
          }
        });
      },
      setPlace(myValue, obj) {
        var mm = this.map;
        mm.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          obj.address = myValue;
          obj.lat = pp.lat;
          obj.lng = pp.lng;
          mm.centerAndZoom(pp, 18);
          mm.addOverlay(new BMap.Marker(pp)); //添加标注
        }

        var local = new BMap.LocalSearch(mm, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
      },
      closeSelf() {
        this.$emit("close");
        this.maps = null;
      },
    }

  }
</script>

<style type="text/javascript" scoped>
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
  }

  .uploadtk {
    position: fixed;
    width: 800px;
    height: 700px;
    top: 50%;
    left: 50%;
    margin-top: -350px;
    margin-left: -400px;
    padding: 10px 50px;
    background: #ffffff;
    box-shadow: -3px 0 5px 0 rgba(213, 213, 213, .35);
    z-index: 99999;
  }

  .uploadtk .dialog_head h2 {
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6e6e6;
  }

  .uploadtk .dialog_head .close {
    position: absolute;
    font-size: 40px;
    height: 50px;
    line-height: 50px;
    right: 0;
    top: 0;
    color: #999;
  }

  .r-results {
    font-size: 16px;
    margin: 20px;
    height: 42px;
    line-height: 40px;
    overflow: hidden;
  }

  .r-results input {
    float: right;
    padding: 0;
    width: 555px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    text-indent: 15px;
  }

  .allmaps {
    height: 470px;
    width: 700px;
  }

  .fade-transition {
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
  }

  .fade-enter, .fade-leave {
    opacity: 0;
  }

  .fade-slow-transition {
    transition: all ease 0.7s;
    -webkit-transition: all ease 0.7s;
  }

  .fade-slow-enter, .fade-slow-leave {
    opacity: 0;
  }

  .fade-scale-transition {
    transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
  }

  .fade-scale-enter, .fade-scale-leave {
    opacity: 0;
    transform: scale(1.08);
    -webkit-transform: scale(1.08);
  }

  .fromRight-transition {
    transition: all ease 10s;
    -webkit-transition: all ease 10s;
  }

  .fromRight-enter, .fromRight-leave {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }

  .fade1-enter-active, .fade1-leave-active {
    transition: opacity .5s
  }

  .fade1-enter, .fade1-leave-to .fade-leave-active in {
    opacity: 0
  }

  .modal-footer {
    overflow: hidden;
    width: 280px;
    margin: 0 auto;
  }

  .modal-footer .btn {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    margin: 20px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
  }

  .modal-footer .submit {
    background: #1abd9b;
  }

  .modal-footer .cancel {
    background: #b4b4b4;
  }

</style>
